<template>
  <view>
    <view class="manager">
      <text v-if="cardList.length > 0"  @click="isDel = !isDel">{{isDel ? '取消' : '管理'}}</text>
    </view>
    <view class="card" v-for="list in cardList" :key="list.id">
      <view class="cardInfo">
        <view class="bankName">
          <text>{{list.bankDeposit}}{{list.branchName}}</text>
          <view v-if="isDel" @click="clickDel(list.id)">删除</view>
        </view>
        <view>银行卡</view>
      </view>
      <view class="cardNumber">
        {{list.bankNumber}}
      </view>
    </view>
    <navigator url="/pages/bankCard/addCard" class="replaceBtn" v-if="cardList.length < 3 " >
      <u-icon name="plus" color="#000000" size="50"></u-icon>
      <text >添加银行卡</text>
    </navigator>
    <u-toast ref="uToast" />
    <u-modal v-model="warnModel"
             :show-cancel-button="true"
             @confirm="delBank"
             title="警告"
             content="是否删除银行卡"></u-modal>
  </view>
</template>
<script>

import {cardList,deleteBank} from "../../api/bankCard";

export default {
  data() {
    return {
      cardList:[],
      // 是否显示删除按钮
      isDel:false,
      //显示删除警告弹窗
      warnModel:false,
      //删除银行卡id
      delId:"",
    }

  },
  methods:{
    //点击删除按钮操作
    clickDel(id){
      this.warnModel = true;
      this.delId = id;
    },
    //删除银行卡操作
    delBank(){
      deleteBank(this.delId).then(res =>{
        this.$refs.uToast.show({
          title: '删除成功',
          type: 'success'
        })
        this.getList();
      })
    },

    //获取银行卡列表
    getList(){
      cardList().then(res =>{
        this.cardList = res.data
      })
    }
  },

  onShow(){
    this.getList()

  },
  onLoad(){

  }
}
</script>

<style lang="scss" scoped>
.manager{
  width: 90%;
  height: 100rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  >text{
    color: #2883f2;
  }
}
.card{
  display: block;
  width: 90%;
  margin: 10rpx auto;
  height: 244rpx;
  background: url(https://source.qingyunclouds.com/cardBg1.png);
  background-size: 100% 100%;
  padding: 20rpx;
  color: #fff;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
  border-radius: 10rpx;
  box-sizing: border-box;
  .cardInfo{
    margin:20rpx 0;
    .bankName{
      display: flex;
      justify-content: space-between;
      align-items: center;
      >view{
        color: #ee7373;
        font-weight: bold;
      }
      >text{
        font-size: 30rpx;
      }
    }

    >view{
      font-size: 30rpx;
      margin-top: 20rpx;
    }
  }
  .cardNumber{
    font-size: 34rpx;
    letter-spacing: 10rpx;
    margin-top: 30rpx;
  }
}
.replaceBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  background: #fff;
  margin: 20rpx auto;
  padding: 30rpx ;
  box-sizing: border-box;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.07);
  border-radius: 20rpx;
  text{
    margin-left: 24rpx;
    font-size: 24rpx;
  }
}
</style>
